<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>日期</title>
		<cw:base></cw:base>
		<script type="text/javascript">
			function loadFormWithDate(){
				Wonders.utils.formLoad('formWithDate',
			    	'${pageContext.request.contextPath}/demoform/loadFormWithDate.action',
			    	{},
			    	function(form,action){
			    		var json = Ext.decode(action.response.responseText).result[0];
			    		Ext.getCmp("date1").setValue(new Date(json.date1.substr(0,4),json.date1.substr(4,2)-1,json.date1.substr(6)));
			    		Ext.getCmp("date2").setValue(new Date(json.date2.substr(0,4),json.date2.substr(4,2)-1,json.date2.substr(6)));
			    		Ext.getCmp("date3").setValue(new Date(json.date3.substr(0,4),json.date3.substr(4,2)-1,json.date3.substr(6)));
			    		Ext.getCmp("date4").setValue(new Date(json.date4.substr(0,4),json.date4.substr(4,2)-1,json.date4.substr(6)));
			    		
			    		var time1 = new Date();
			    		time1.setHours(json.time1.substr(0,2),json.time1.substr(3,2),json.time1.substr(6));
			    		Ext.getCmp("time1").setValue(time1);
			    		var time2 = new Date();
			    		time2.setHours(json.time2.substr(0,2),json.time2.substr(3,2),json.time2.substr(6));
			    		Ext.getCmp("time2").setValue(time2);
			    	}
			    );
			}
			
			function submitFormWithDate(){
				Wonders.utils.formSubmit(Ext.getCmp("submitDateBtn"), 'formWithDate',
					function(form,action){
						Wonders.Msg.info("保存成功！",'提示',function(){Ext.getCmp('submitDateBtn').enable();__WSSIP_GENERATE_GUID__();});
						return false;
					},
					null,
					function(form,action){
						Ext.getCmp('submitDateBtn').enable();
						__WSSIP_FAILURE_HANLDER__(form,action);
						return false;
					}
				);
			}
		</script>
	</head>
	<body>
		<ul>
			<li>
				<b> 日期输入框是下拉框的一种，系统会自动的创建一个日历并作为该编辑框的下拉框而存在，供日期选择 </b>
			</li>
		</ul>
		<br />
		<cw:form id="formWithDate" url="${pageContext.request.contextPath}/demoform/submitFormWithDate.action">
			<ul>
				<li>
					<b> 1.普通日期：数据类型为Date，数据传输及显示的默认日期格式为Y-m-d </b>
				</li>
			</ul>
			<br/>
			<ul>
				<li>
					<table width="98%">
						<colgroup>
							<col width='7%'>
							<col width='18%'>
							<col width='7%'>
							<col width='18%'>
							<col width='11%'>
							<col width='14%'>
							<col width='10%'>
							<col width='15%'>
						</colgroup>
						<tr>
							<td>
								Y-m-d：
							</td>
							<td>
								<cw:dateField id="date1" property="date1" label="日期一" value="20160101" width="60%"/>
							</td>
							<td>
								Y年m月d：
							</td>
							<td>
								<cw:dateField id="date2" property="date2" label="日期二" format="Y年m月d日" value="20160101" />
							</td>
							<td>
								设置周日和周六无效：
							</td>
							<td>
								<cw:dateField id="date3" property="date3" label="日期三" disabledDays="[0, 6]" value="20160101"/>
							</td>
							<td>
								设置日期范围：
							</td>
							<td>
								<cw:dateField id="date4" property="date4" label="日期四" minValue="20150101" maxValue="20161231" value="20160101" />
							</td>
						</tr>
					</table>
				</li>
			</ul>
			<hr/>
			<ul>
				<li>
					<b> 2.年月：年月输入框是只提供对于年份和月份的输入，为了方便不需要显示天数的选择  </b>
				</li>
			</ul>
			<br/>
			<ul>
				<li>
					<table width="98%">
						<colgroup>
							<col width='7%'>
							<col width='18%'>
							<col width='7%'>
							<col width='18%'>
							<col width='11%'>
							<col width='14%'>
							<col width='10%'>
							<col width='15%'>
						</colgroup>
						<tr>
							<td>
								Y-m：
							</td>
							<td>
								<cw:monthField id="month1" property="month1" label="年月1" value="201601" width="60%"/>
							</td>
							<td>
								Y年m：
							</td>
							<td>
								<cw:monthField id="month2" property="month2" label="年月2" format="Y年m月" value="2016年01月" />
							</td>
							<td>
								设置日期范围：
							</td>
							<td>
								<cw:monthField id="month3" property="month3" label="年月3" value="201601" minValue="201501" maxValue="201612"/>
							</td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</li>
			</ul>
			<hr/>
			<ul>
				<li>
					<b> 3.时间：时间输入框是提供时分秒的输入，并且允许鼠标滚动轴，键盘对时间进行调节  </b>
				</li>
			</ul>
			<br/>
			<ul>
				<li>
					<table width="98%">
						<colgroup>
							<col width='7%'>
							<col width='18%'>
							<col width='7%'>
							<col width='18%'>
							<col width='11%'>
							<col width='14%'>
							<col width='10%'>
							<col width='15%'>
						</colgroup>
						<tr>
							<td>
								时分秒：
							</td>
							<td>
								<cw:timeField id="time1" property="time1" label="时间1" width="60%" readOnly="true"/>
							</td>
							<td>
								时分：
							</td>
							<td>
								<cw:timeField id="time2" property="time2" label="时间2" format="H:i" />
							</td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
				</li>
			</ul>
			<hr/>
			<ul>
				<li>
					<b> 4.日期时间：日期时间输入框提供了将日期输入和时间输入整合到一起的功能，默认日期格式为Y-m-d H:i:s  </b>
				</li>
				<li>
					<b> 通过属性分别设定日期dateFormat和时间timeFormat输入框的显示格式 </b>
				</li>
				<li>
					<b> 通过属性分别设定日期dateWidth和时间timeWidth输入框的宽度 </b>
				</li>
			</ul>
			<br/>
			<ul>
				<li>
					<table width="98%">
						<colgroup>
							<col width='8%'>
							<col width='25%'>
							<col width='8%'>
							<col width='25%'>
							<col width='8%'>
							<col width='25%'>
						</colgroup>
						<tr>
							<td>
								日期时间1：
							</td>
							<td>
								<cw:dateTimeField id="dateTime1" property="dateTime1" label="日期时间1" value="${param.nowtime }" />
							</td>
							<td>
								日期时间2：
							</td>
							<td>
								<cw:dateTimeField id="dateTime2" property="dateTime2" label="日期时间2" dateFormat="Y年m月d日" timeFormat="H:i" value="${param.nowtime }"/>
							</td>
							<td>
								日期时间3：
							</td>
							<td>
								<cw:dateTimeField id="dateTime3" property="dateTime3" label="日期时间3" dateWidth="100" timeWidth="80" value="${param.nowtime }"/>
							</td>
						</tr>
					</table>
				</li>
			</ul>
			<hr>
			<table>
				<tr>
					<td>
						<cw:button id="loadDateBtn" text="加载日期" onclick="loadFormWithDate();"></cw:button>
					</td>
					<td>
						<cw:button id="submitDateBtn" text="提交日期" onclick="submitFormWithDate();"></cw:button>
					</td>
					<td>
						<cw:button id="loadDateBtn11" text="可编辑" onclick="function(){Ext.getCmp('time1').setReadOnly(false)}"></cw:button>
					</td>
					<td>
						<cw:button id="submitDateBtn11" text="只读" onclick="function(){Ext.getCmp('time1').setReadOnly(true)}"></cw:button>
					</td>
				</tr>
			</table>
		</cw:form>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				resetHeight("dateFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
